// 封装本地存储工具函数
/**
 * 获取本地存储
 * @param {string} key - 存储的键
 * @param {string} defaultValue - 默认值
 * @returns {string} 存储的值
 */
const getLocalStorage = (key, defaultValue) => {
  const storedValue = localStorage.getItem(key);
  return storedValue !== null ? storedValue : defaultValue;
};

/**
 * 设置本地存储
 * @param {string} key - 存储的键
 * @param {string} value - 存储的值
 */
const setLocalStorage = (key, value) => {
  localStorage.setItem(key, value);
};

/**
 * 菜单选中函数
 */
//找到id="pc-menu"下，所有a标签的链接，对比当前的网址后缀，是的话，给对应a标签添加menu-tips的class
document.addEventListener("DOMContentLoaded", function () {
  var url = window.location.href;
  console.log(url);
  var pcMenu = document.getElementById("pc-menu");

  if (pcMenu) {
    var links = pcMenu.querySelectorAll("a");
    links.forEach(function (link) {
      if (url.indexOf(link.getAttribute("href")) > -1) {
        link.classList.add("menu-tips");
      }
    });
  }
});

/**
 * 移动端菜单选中函数 - 页面完全加载后执行
 */
window.addEventListener("load", function () {
  var url = window.location.href;
  var mobileMenu = document.getElementById("mobile-menu");

  if (mobileMenu) {
    var links = mobileMenu.querySelectorAll("a");
    links.forEach(function (link) {
      if (url.indexOf(link.getAttribute("href")) > -1) {
        link.classList.add("style-title");
      } else {
        link.classList.add("style-title-no-active");
      }
    });
  }
});

/**
 * 移动端菜单打开/关闭切换
 */
const openMobileMenu = () => {
  const mobileMenuActive = document.getElementById("mobile-menu-btn"); //移动端菜单开关
  const mobileMenu = document.getElementById("mobile-menu"); //移动端菜单
  if (mobileMenuActive) {
    mobileMenuActive.classList.toggle("active");
  }
  if (mobileMenu) {
    mobileMenu.classList.toggle("open");
  }
};

// 丝滑回到顶部函数
const scrollToTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  });
};

// 监听滚动事件，显示/隐藏回到顶部按钮
let scrollTimer = null;
window.onscroll = function () {
  if (scrollTimer) {
    clearTimeout(scrollTimer);
  }
  scrollTimer = setTimeout(() => {
    const scrollTop =
      document.documentElement.scrollTop || document.body.scrollTop;
    const backToTopElement = document.querySelector(".back-to-top");
    if (backToTopElement) {
      if (scrollTop > 300) {
        backToTopElement.classList.add("visible");
      } else {
        backToTopElement.classList.remove("visible");
      }
    }
  }, 100);
};

/**
 * 字体切换
 * 传统：classic，黑体：sans，宋体serif，
 */

//给指定的按钮添加样式
const addFontStyleClass = (font) => {
  const classic = document.getElementById("font-classic");
  const sans = document.getElementById("font-sans");
  const serif = document.getElementById("font-serif");
  classic.classList.remove("style-mark-bg");
  sans.classList.remove("style-mark-bg");
  serif.classList.remove("style-mark-bg");
  if (font === "serif") {
    serif.classList.add("style-mark-bg");
  } else if (font === "sans") {
    sans.classList.add("style-mark-bg");
  } else {
    classic.classList.add("style-mark-bg");
  }
};

//检查本地是否存储有字体样式值 初始加载
document.addEventListener("DOMContentLoaded", function () {
  const storedFont = getLocalStorage("fontStyle", "classic");
  if (storedFont) {
    changeFont(storedFont); //改变字体样式
    addFontStyleClass(storedFont); //添加按钮样式
  }
});
//接收一个字体，触发后，给root ID添加class
const changeFont = (font) => {
  let fontStyle;
  if (font === "serif") {
    fontStyle = "heti--serif";
  } else if (font === "sans") {
    fontStyle = "heti--sans";
  } else {
    fontStyle = "heti--classic";
  }
  const rootID = document.getElementById("root"); //拿到根页面
  if (rootID) {
    // 先移除所有可能的字体样式类
    rootID.classList.remove("heti--serif", "heti--sans", "heti--classic");
    rootID.classList.add(fontStyle); // 再添加当前选中的字体样式类
    setLocalStorage("fontStyle", font); //存储字体样式到本地
    addFontStyleClass(font); //添加按钮样式
  }
};

/**
 * 主题切换
 * 主题，默认为自动，自动： auto  白天：light ，黑夜：dark
 */
//给指定的按钮添加样式
const addThemeStyleClass = (theme) => {
  const auto = document.getElementById("theme-auto");
  const light = document.getElementById("theme-light");
  const dark = document.getElementById("theme-dark");
  auto.classList.remove("style-mark-bg");
  light.classList.remove("style-mark-bg");
  dark.classList.remove("style-mark-bg");
  if (theme === "light") {
    light.classList.add("style-mark-bg");
  } else if (theme === "dark") {
    dark.classList.add("style-mark-bg");
  } else {
    auto.classList.add("style-mark-bg");
  }
};
//检查本地是否存储有主题样式值 初始加载
document.addEventListener("DOMContentLoaded", function () {
  const storedTheme = getLocalStorage("themeStyle", "auto");
  if (storedTheme) {
    changeTheme(storedTheme); //改变主题样式
    addThemeStyleClass(storedTheme); //添加按钮样式
  }
});

// 接收一个主题，触发后，给 HTML 标签添加 class
const changeTheme = (theme) => {
  // 移除所有可能的主题样式类
  const htmlElement = document.querySelector("html"); /// 获取 HTML 元素
  htmlElement.classList.remove("auto", "dark", "light"); // 移除所有可能主题样式类

  if (theme === "auto") {
    htmlElement.setAttribute("class", "");
  } else {
    // 添加当前选中的主题样式类
    htmlElement.classList.add(theme);
  }

  // 存储主题样式到本地
  setLocalStorage("themeStyle", theme);

  // 添加按钮样式
  addThemeStyleClass(theme);
};
